<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">优惠券列表</block>
		</cu-custom>
		<view class="padding">
			<view class="navList bg-white radius-xl padding-xs">
				<u-sticky bgColor="#fff">
					<u-tabs 
						:list="navList" 
						@click="navClick" 
						keyName="name"
						:scrollable="false"
						lineColor="var(--theme-color)"
						:activeStyle="{color:'var(--theme-color)',fontWeight:'bold'}">
					</u-tabs>
				</u-sticky>
			</view>
		</view>
		<view class="padding padding-top-0 list">			
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-for="(item,index) in 2" :key="index">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="text-sm">￥</text>
						<text class="number text-bold">5.00</text>
					</view>
					<view class="text-red text-sm">
						最高可减
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							慢减券 <!--  -->
						</view>
						<view class="min text-gray padding-bottom-xs">
							<text class="text-sm text-gray">满8可用</text>
						</view>
						<view class="min text-gray">
							有效期至 2023-09-12
						</view>
					</view>
					<view class="linqu">
						<button class="cu-btn bg-green sm round shadow">去使用</button>
					</view>
				</view>
				
			</view>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				navList:[
					{name:'未使用',scene:'isUnused'},
					{name:'已使用',scene:'isUse'},
					{name:'已过期',scene:'isExpire'},
				],
				current_page:1,
				list:[]
			};
		},
		onLoad() {
		},
		methods:{
			navClick(e){
				this.list = [];
				this.navIndex = e.index;
				this.current_page = 1;
			}
		}
	}
</script>

<style lang="less" scoped>
.list{
	.item{
		position: relative;
		display: flex;
		align-items: center;
		.money-text{
			width: 170upx;
			.money{
				.number{
					font-size: 40upx;
				}
			}
		}
		.right{
			flex: 1;
			justify-content: space-between;						
			.nameBox{
				.name{
					font-size: 30upx;
				}
				.min{
					font-size: 24upx;
				}
			}
		}
	}
}
.coupon::before,.coupon::after{
	content: "";
	position: absolute;
	background-color: #f5f5f7;	
	width: 20upx;
	height: 20upx;
}
.coupon::before {
	top: 0;
	right: 25%;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 25%;
    border-radius: 50% 50% 0 0; /* 底部两个半圆 */
}
</style>
